import PropTypes from "prop-types";
import classnames from "classnames";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTimes } from "@fortawesome/free-solid-svg-icons";

import sty from "./index.module.scss";

export default function TabList({
  fileList,
  activeId,
  unsaveIds,
  onTabClick,
  onTabClose,
}) {
  return (
    <ul className={classnames("nav nav-pills", sty.tabListWrap)}>
      {fileList.map((file) => {
        const isUnSave = unsaveIds.includes(file.id);
        const cls = classnames({
          "nav-link": true,
          active: file.id === activeId,
          [sty.linkItem]: true,
          [sty.unSave]: isUnSave,
        });

        const handleDel = (e, file) => {
          e.preventDefault();
          e.stopPropagation();
          onTabClose(file);
        };
        const handleClick = (e, file) => {
          e.preventDefault();
          e.stopPropagation();
          onTabClick(file);
        };
        return (
          <li className={`nav-item`} key={file.id}>
            <span className={cls} onClick={(e) => handleClick(e, file)}>
              {file.name}
              <span
                className={classnames("ml-2", sty.closeIconWrap)}
                onClick={(e) => handleDel(e, file)}
              >
                <FontAwesomeIcon icon={faTimes} />
              </span>
              {isUnSave && <span className={sty.unSaveIconWrap}></span>}
            </span>
          </li>
        );
      })}
    </ul>
  );
}

TabList.propTypes = {
  fileList: PropTypes.array.isRequired,
  unsaveIds: PropTypes.array,
  editId: PropTypes.number,
  onTabClick: PropTypes.func.isRequired,
  onTabClose: PropTypes.func.isRequired,
};
TabList.defaultProps = {
  unsaveIds: [],
};
